<script setup>
    import {reactive, ref} from "vue";
    // 首先导入router中的useRouter方法
    // useRouter 函数能让你在 setup 函数或者 <script setup> 语法糖中获取到当前的路由实例
    import { useRouter } from "vue-router";
    import {productDetails} from '@/components/shop/productDetails';
    const router = useRouter();


    // 这一段是使用VueRouter进行路由导航的代码
    // 定义一个名字叫goToDetails的方法，接收id参数
    // 作用是导航到名为details的路由，并将传入的id作为路由参数传递过去
    const goToDetails = (id) => {
      // push是router实例的一个方法，用于向历史记录栈中添加一个新的路由记录，实现页面跳转
      // name: 指定要导航到的路由的名称
      // params: 一个对象，用于传递路由参数
      // 当用户点击购物车列表中的商品名称时，会调用goToDetails函数,将商品的id传递给详情页
      router.push({ name: "details", params: { id } });
    };
</script>

<template>
     <el-card shadow="always" style="margin: 20px;">
    <template #header>
      <div style="font-size: 18px; font-weight: bold;">购物车列表</div>
    </template>

    <!-- 使用 el-table 展示商品列表 -->
    <el-table 
      :data="productDetails" 
      border 
      style="width: 100%; margin-top: 15px;"
    >
      <!-- 商品 ID 列 -->
      <el-table-column prop="id" label="商品编号" width="120" align="center" />
      
      <!-- 商品名称列（可点击跳转） -->
      <el-table-column label="商品名称" align="left">
        <template #default="{ row }">
          <el-link 
            :underline="false" 
            type="primary" 
            @click="goToDetails(row.id)"
            style="cursor: pointer;"
          >
            {{ row.name }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
    <!-- <h1>购物车列表!</h1>
    <el-table :data="productDetails" style="width: 100%">
        <RouterLink :to="{ name: 'details', params: { id: i.id } }">
            <el-table-column label="商品名称" prop="name" v-for="i in productDetails"></el-table-column>
        </RouterLink>
    </el-table> -->
    <!-- <ul>
        <li v-for="i in productDetails" key="i.id">
            details
            <RouterLink :to="{ name: 'details', params: { id: i.id } }">
                {{ i.name }}
            </RouterLink>
        </li>
    </ul> -->
<!--    <RouterLink to="/list/details">商品1</RouterLink>-->
    <RouterView></RouterView>
</template>
  
<style scoped>
li{
  list-style-type: none;
}
</style>